<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Tree 树 | Vue DevUI</title>
    <meta name="description" content="Vue DevUI 组件库">
    <link rel="stylesheet" href="/assets/style.b884dd64.css">
    <link rel="modulepreload" href="/assets/Home.e734a50d.js">
    <link rel="modulepreload" href="/assets/AlgoliaSearchBox.e66f60b3.js">
    <link rel="modulepreload" href="/assets/app.43ba01c1.js">
    <link rel="modulepreload" href="/assets/components_tree_index.md.2611f2c7.lean.js">
    <link rel="modulepreload" href="/assets/app.43ba01c1.js">
    <link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
    <meta name="twitter:title" content="Tree 树 | Vue DevUI">
    <meta property="og:title" content="Tree 树 | Vue DevUI">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-4bb0db66><div class="nav-bar-inner" data-v-4bb0db66><div class="sidebar-button" data-v-4bb0db66><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" aria-label="Vue DevUI, back to home" data-v-4bb0db66 data-v-4d0f7fcc><img class="logo" src="/../../assets/logo.svg" alt="Logo" data-v-4d0f7fcc><span data-v-4d0f7fcc>Vue DevUI</span></a><!--[--><!--[--><div id="docsearch" multilang="false"></div><!--]--><!--]--><div class="flex-grow" data-v-4bb0db66></div><div class="flex items-center" data-v-4bb0db66><div class="nav" data-v-4bb0db66><nav class="nav-links" data-v-4bb0db66 data-v-5b7b1e24><!--[--><!-- <div v-for="item in theme.nav" :key="item.text" class="item"> --><!--[--><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/quick-start/" data-v-53d6b5a1>组件 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/contributing/" data-v-53d6b5a1>贡献指南 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://devcloudfe.github.io/devui-playground" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>Playground <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases/tag/v1.5.1" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>1.5.1 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>文档</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>更新日志</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/design-cn/start" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>设计规范</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>生态</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/admin-page/home" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI Admin</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://react-devui.surge.sh/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>React DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/DevUIHelper" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Helper</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/devui-playground" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Playground</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/icon/ruleResource" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>图标库</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!--]--><!----><!----></nav></div><div class="custom-nav flex items-center ml-l" data-v-4bb0db66><!----><!----><div class="custom-nav-item flex items-center ml-m" data-v-4bb0db66><!--[--><span class="devui-popper-trigger"><svg class="icon-theme" viewbox="0 0 1024 1024" width="16" height="16" data-v-6fec2a10><path fill="var(--devui-text)" d="M512 96C229.696 96 0 325.696 0 608c0 90.368 30.304 174.496 85.344 236.896 55.264 62.624 129.152 97.12 208.128 97.12 81.568 0 161.536-36.832 231.264-106.592l2.272-2.496c65.792-81.472 132.896-121.056 205.088-121.056 46.72 0 89.216 15.872 126.688 29.92 30.336 11.328 56.576 21.12 81.216 21.12C1024 762.912 1024 654.336 1024 608c0-282.304-229.696-512-512-512z m428 602.912c-13.088 0-35.296-8.288-58.784-17.088-40.48-15.136-90.848-33.952-149.12-33.952-92.352 0-175.328 46.944-253.76 143.456-57.184 56.704-121.056 86.688-184.832 86.688-60.352 0-117.216-26.784-160.128-75.456C88.64 751.872 64 682.784 64 608 64 360.96 264.96 160 512 160s448 200.96 448 448c0 27.328-1.952 90.912-20 90.912z m-203.296-182.848a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m-343.68-202.688a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m215.68 26.688a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m-381.312 112a64 64 0 1 0 128 0 64 64 0 1 0-128 0zM182.4 698.752a96 96 0 1 0 192 0 96 96 0 1 0-192 0z" data-v-6fec2a10></path></svg></span><!--teleport start--><!--teleport end--><!--]--></div><a class="custom-nav-item ml-m" style="font-size:0;user-select:none;" href="https://github.com/DevCloudFE/vue-devui" target="_blank" data-v-4bb0db66><svg viewBox="0 0 20 20" width="18" height="18" data-v-4bb0db66><path fill="var(--devui-text, #252b3a)" d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0" data-v-4bb0db66></path></svg></a></div></div></div></header><aside class="sidebar" data-v-06a2164a><nav class="nav-links nav" data-v-06a2164a data-v-5b7b1e24><!--[--><!-- <div v-for="item in theme.nav" :key="item.text" class="item"> --><!--[--><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/quick-start/" data-v-53d6b5a1>组件 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item" href="/contributing/" data-v-53d6b5a1>贡献指南 <!----></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://devcloudfe.github.io/devui-playground" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>Playground <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-link" data-v-5b7b1e24 data-v-53d6b5a1><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases/tag/v1.5.1" target="_blank" rel="noopener noreferrer" data-v-53d6b5a1>1.5.1 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-53d6b5a1><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>文档</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/vue-devui/releases" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>更新日志</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/design-cn/start" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>设计规范</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-5b7b1e24><div class="nav-dropdown-link" data-v-5b7b1e24 data-v-40cec4b2><button class="button" data-v-40cec4b2><span class="button-text" data-v-40cec4b2>生态</span><span class="right button-arrow" data-v-40cec4b2></span></button><ul class="dialog" data-v-40cec4b2><!--[--><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/admin-page/home" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>Ng DevUI Admin</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://react-devui.surge.sh/" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>React DevUI</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/DevUIHelper" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Helper</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://github.com/DevCloudFE/devui-playground" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>DevUI Playground</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-40cec4b2><div class="nav-dropdown-link-item" data-v-40cec4b2 data-v-2a283218><a class="item isExternal" href="https://devui.design/icon/ruleResource" target="_blank" rel="noopener noreferrer" data-v-2a283218><span class="arrow" data-v-2a283218></span><span class="text" data-v-2a283218>图标库</span><span class="icon" data-v-2a283218><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-2a283218><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!--]--><!----><!----></nav><!--[--><!--]--><ul class="sidebar-links" data-v-06a2164a><!--[--><li class="sidebar-link"><a class="sidebar-link-item" href="/quick-start/"><!----><span class="sidebar-link-text">快速开始<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/on-demand/"><!----><span class="sidebar-link-text">按需引入<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/theme-guide/"><!----><span class="sidebar-link-text">主题定制<!----></span></a><!----></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">通用<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/button/"><!----><span class="sidebar-link-text">Button 按钮<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/fullscreen/"><!----><span class="sidebar-link-text">Fullscreen 全屏<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/icon/"><!----><span class="sidebar-link-text">Icon 图标<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/overlay/"><!----><span class="sidebar-link-text">Overlay 遮罩层<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/panel/"><!----><span class="sidebar-link-text">Panel 面板<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/ripple/"><!----><span class="sidebar-link-text">Ripple 水波纹<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/search/"><!----><span class="sidebar-link-text">Search 搜索框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/status/"><!----><span class="sidebar-link-text">Status 状态<!----></span></a><!----></li><!----><!----></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">导航<!----></span></p><ul class="sidebar-links"><!----><!----><!----><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/dropdown/"><!----><span class="sidebar-link-text">Dropdown 下拉菜单<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/menu/"><!----><span class="sidebar-link-text">Menu 菜单<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/pagination/"><!----><span class="sidebar-link-text">Pagination 分页<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tabs/"><!----><span class="sidebar-link-text">Tabs 选项卡<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">反馈<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/alert/"><!----><span class="sidebar-link-text">Alert 警告<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/drawer/"><!----><span class="sidebar-link-text">Drawer 抽屉板<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/loading/"><!----><span class="sidebar-link-text">Loading 加载提示<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/message/"><!----><span class="sidebar-link-text">Message 全局提示<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/modal/"><!----><span class="sidebar-link-text">Modal 弹窗<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/notification/"><!----><span class="sidebar-link-text">Notification 全局通知<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/popover/"><!----><span class="sidebar-link-text">Popover 悬浮提示<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/result/"><!----><span class="sidebar-link-text">Result 结果<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tooltip/"><!----><span class="sidebar-link-text">Tooltip 提示<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">数据录入<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/auto-complete/"><!----><span class="sidebar-link-text">AutoComplete 自动补全<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/checkbox/"><!----><span class="sidebar-link-text">Checkbox 复选框<!----></span></a><!----></li><!----><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/date-picker-pro/"><!----><span class="sidebar-link-text">DatePickerPro 日期选择器<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/editable-select/"><!----><span class="sidebar-link-text">EditableSelect 可输入下拉选择框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/form/"><!----><span class="sidebar-link-text">Form 表单<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/input/"><!----><span class="sidebar-link-text">Input 输入框<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/input-number/"><!----><span class="sidebar-link-text">InputNumber 数字输入框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/mention/"><!----><span class="sidebar-link-text">Mention 提及<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/radio/"><!----><span class="sidebar-link-text">Radio 单选框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/select/"><!----><span class="sidebar-link-text">Select 下拉框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/slider/"><!----><span class="sidebar-link-text">Slider 滑块<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/switch/"><!----><span class="sidebar-link-text">Switch 开关<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/textarea/"><!----><span class="sidebar-link-text">Textarea 多行文本框<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/time-picker/"><!----><span class="sidebar-link-text">TimePicker 时间选择器<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/time-select/"><!----><span class="sidebar-link-text">TimeSelect 时间选择器<!----></span></a><!----></li><!----><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/upload/"><!----><span class="sidebar-link-text">Upload 上传<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">数据展示<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/avatar/"><!----><span class="sidebar-link-text">Avatar 头像<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/badge/"><!----><span class="sidebar-link-text">Badge 徽标<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/card/"><!----><span class="sidebar-link-text">Card 卡片<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/collapse/"><!----><span class="sidebar-link-text">Collapse 折叠面板<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/countdown/"><!----><span class="sidebar-link-text">Countdown 倒计时<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/image-preview/"><!----><span class="sidebar-link-text">ImagePreview 图片预览<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/progress/"><!----><span class="sidebar-link-text">Progress 进度条<!----></span></a><!----></li><!----><li class="sidebar-link"><a class="sidebar-link-item" href="/components/rate/"><!----><span class="sidebar-link-text">Rate 评分<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/skeleton/"><!----><span class="sidebar-link-text">Skeleton 骨架屏<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/statistic/"><!----><span class="sidebar-link-text">Statistic 统计数值<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/steps/"><!----><span class="sidebar-link-text">Steps 步骤条<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/table/"><!----><span class="sidebar-link-text">Table 表格<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/tag/"><!----><span class="sidebar-link-text">Tag 标签<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/timeline/"><!----><span class="sidebar-link-text">Timeline 时间轴<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item active" href="/components/tree/"><!----><span class="sidebar-link-text">Tree 树<!----></span></a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item"><!----><span class="sidebar-link-text">布局<!----></span></p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/components/grid/"><!----><span class="sidebar-link-text">Grid 栅格<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/layout/"><!----><span class="sidebar-link-text">Layout 布局<!----></span></a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/components/splitter/"><!----><span class="sidebar-link-text">Splitter 分割器<!----></span></a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-35e0cb6b><div class="container" data-v-35e0cb6b><!--[--><!--]--><div style="position:relative;" class="content" data-v-35e0cb6b><div><h1 id="tree-树" tabindex="-1">Tree 树 <a class="header-anchor" href="#tree-树" aria-hidden="true">#</a></h1><p>一种呈现嵌套结构的组件。</p><h4 id="何时使用" tabindex="-1">何时使用 <a class="header-anchor" href="#何时使用" aria-hidden="true">#</a></h4><p>文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树组件可以完整展现其中的层级关系，并具有展开/收起、选择等交互功能。</p><h3 id="基本用法" tabindex="-1">基本用法 <a class="header-anchor" href="#基本用法" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-tree"><!--[--><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon mr-xs"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#252b3a"></rect><path fill="#252b3a" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">Parent node 1<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">Leaf node 2<!----></span><!--]--><!----></div><!----></div></div><!--]--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>展示嵌套树形结构的呈现、连接线、展开/收起、点击选择等功能。动画效果依赖树节点的高度，默认高度为<code>30px</code>，自定义树节点时，为了保证动画效果正常显示，建议显式设置树节点高度。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-tree</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-tree</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node 1&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node 1-1&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 1-1-1&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 1-2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      data<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="节点懒加载" tabindex="-1">节点懒加载 <a class="header-anchor" href="#节点懒加载" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-tree"><!--[--><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon mr-xs"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#252b3a"></rect><path fill="#252b3a" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">Parent node 1<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon mr-xs"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#252b3a"></rect><path fill="#252b3a" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">Leaf node 2 - dynamic loading<!----></span><!--]--><!----></div><!----></div></div><!--]--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>通过设置该节点 <code>isLeaf</code> 参数为 <code>false</code>, 组件回调 <code>lazyLoad</code> 方法实现节点懒加载。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-tree</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@lazy-load</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lazyLoad<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-tree</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node 1&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node 1-1 - dynamic loading&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">isLeaf</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 1-2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 2 - dynamic loading&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">isLeaf</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">lazyLoad</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">node<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;child node 1&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">expanded</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
              <span class="token punctuation">{</span>
                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;child node 1-1&#39;</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
              <span class="token punctuation">{</span>
                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;child node 1-2&#39;</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;child node 2&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
              <span class="token punctuation">{</span>
                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;child node 2-1&#39;</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          <span class="token literal-property property">treeItems</span><span class="token operator">:</span> data<span class="token punctuation">,</span>
          node<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      data<span class="token punctuation">,</span>
      lazyLoad<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="可勾选" tabindex="-1">可勾选 <a class="header-anchor" href="#可勾选" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="flex flex-row" style="height:28px;"><label class="flex items-center mr-xl"><span class="inline-block mr-xs">开启勾选</span><div class="devui-switch devui-switch--md"><span class="devui-switch__wrapper devui-switch--checked" style="background:undefined;border-color:undefined;"><span class="devui-switch__inner-wrapper"><div class="devui-switch__inner"><!--[--><!--]--></div></span><small></small></span></div></label><div class="devui-radio-group is-row"><!--[--><!--[--><div class="devui-radio__wrapper"><label class="active devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="both" checked><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->both<!--]--></span></label></div><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="downward"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->downward<!--]--></span></label></div><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="upward"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->upward<!--]--></span></label></div><div class="devui-radio__wrapper"><label class="devui-radio devui-radio--md"><input type="radio" class="devui-radio__input" value="none"><span class="devui-radio__material"><svg height="100%" width="100%" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><circle class="devui-radio__material-outer" cx="512" cy="512" r="486.5" stroke-width="51"></circle><circle class="devui-radio__material-inner" cx="512" fill-rule="nonzero" cy="512" r="320"></circle></svg></span><span class="devui-radio__label"><!--[-->none<!--]--></span></label></div><!--]--><!--]--></div></div><div class="devui-tree"><!--[--><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon mr-xs"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#252b3a"></rect><path fill="#252b3a" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox--no-label devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text"><!----></span></label></div></div><!--[--><span class="devui-tree__node-title">Parent node 1<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox--no-label devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text"><!----></span></label></div></div><!--[--><span class="devui-tree__node-title">Leaf node 2<!----></span><!--]--><!----></div><!----></div></div><!--]--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>通过<code>check</code>开启勾选功能。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex flex-row<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 28px<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>flex items-center mr-xl<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>inline-block mr-xs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>开启勾选<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-switch</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>openCheck<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-switch</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio-group</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>openCheck<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>currentStrategy<span class="token punctuation">&quot;</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>row<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-radio</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>strategy of checkStrategy<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>strategy<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>strategy<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ strategy }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-radio-group</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-tree</span>
    <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:check</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>currentStrategy<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">@toggle-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>toggleChange<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">@check-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkChange<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">@select-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selectChange<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">@node-click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nodeClick<span class="token punctuation">&quot;</span></span>
  <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-tree</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> watch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> openCheck <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> checkStrategy <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;both&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;downward&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;upward&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;none&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> currentStrategy <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">&#39;both&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node 1&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node 1-1&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 1-1-1&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 1-1-2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 1-2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token function">watch</span><span class="token punctuation">(</span>openCheck<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">newVal</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>newVal <span class="token operator">===</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        currentStrategy<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        currentStrategy<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">&#39;both&#39;</span><span class="token punctuation">;</span>

        data<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node 1&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
              <span class="token punctuation">{</span>
                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node 1-1&#39;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 1-1-1&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 1-1-2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
              <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 1-2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">toggleChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">node</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;toggleChange node:&#39;</span><span class="token punctuation">,</span> node<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">checkChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">node</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;checkChange node:&#39;</span><span class="token punctuation">,</span> node<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">selectChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">node</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;selectChange node:&#39;</span><span class="token punctuation">,</span> node<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">nodeClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">node</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;nodeClick node:&#39;</span><span class="token punctuation">,</span> node<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      data<span class="token punctuation">,</span>
      openCheck<span class="token punctuation">,</span>
      checkStrategy<span class="token punctuation">,</span>
      currentStrategy<span class="token punctuation">,</span>
      toggleChange<span class="token punctuation">,</span>
      checkChange<span class="token punctuation">,</span>
      selectChange<span class="token punctuation">,</span>
      nodeClick<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="默认状态" tabindex="-1">默认状态 <a class="header-anchor" href="#默认状态" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-tree"><!--[--><div class="devui-tree__node devui-tree__node--open" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon svg-icon-close mr-xs"><g stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#5e7ce0"></rect><rect x="4" y="7" width="8" height="2" fill="#5e7ce0"></rect></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox--no-label devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text"><!----></span></label></div></div><!--[--><span class="devui-tree__node-title">Parent node 1<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:24px;"><!--[--><span class="devui-tree__node-vline" style="height:30px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:9px;"></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon mr-xs"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#252b3a"></rect><path fill="#252b3a" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox--no-label devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text"><!----></span></label></div></div><!--[--><span class="devui-tree__node-title">Parent node 1-1<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:24px;"><!--[--><span class="devui-tree__node-vline" style="height:15px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:9px;"></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><div class="" style=""><div class="devui-checkbox active"><label title class="devui-checkbox--md" style="width:auto;"><input class="devui-checkbox__input" type="checkbox" indeterminate="false" checked><span style="" class="devui-checkbox__material devui-checkbox--no-label devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text"><!----></span></label></div></div><!--[--><span class="devui-tree__node-title">Leaf node 1-2<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content active"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox--no-label devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text"><!----></span></label></div></div><!--[--><span class="devui-tree__node-title">Leaf node 2<!----></span><!--]--><!----></div><!----></div></div><!--]--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>通过<code>expanded</code>/<code>selected</code>/<code>checked</code>分别设置默认展开/收起、点击选择、勾选状态。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-tree</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data<span class="token punctuation">&quot;</span></span> <span class="token attr-name">check</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-tree</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node 1&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">expanded</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node 1-1&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 1-1-1&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 1-2&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">checked</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 2&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      data<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="禁用状态" tabindex="-1">禁用状态 <a class="header-anchor" href="#禁用状态" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-tree"><!--[--><div class="devui-tree__node devui-tree__node--open" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon svg-icon-close mr-xs"><g stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#5e7ce0"></rect><rect x="4" y="7" width="8" height="2" fill="#5e7ce0"></rect></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox--no-label devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text"><!----></span></label></div></div><!--[--><span class="devui-tree__node-title">Parent node 1<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:24px;"><!--[--><span class="devui-tree__node-vline" style="height:30px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:9px;"></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder toggle-disabled"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon mr-xs"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#252b3a"></rect><path fill="#252b3a" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><div class="" style=""><div class="devui-checkbox disabled unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input class="devui-checkbox__input" type="checkbox" indeterminate="false" disabled><span style="" class="devui-checkbox__material devui-checkbox--no-label devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text"><!----></span></label></div></div><!--[--><span class="devui-tree__node-title select-disabled">Parent node 1-1<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:24px;"><!--[--><span class="devui-tree__node-vline" style="height:15px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:9px;"></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><div class="" style=""><div class="devui-checkbox disabled unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input class="devui-checkbox__input" type="checkbox" indeterminate="false" disabled><span style="" class="devui-checkbox__material devui-checkbox--no-label devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text"><!----></span></label></div></div><!--[--><span class="devui-tree__node-title">Leaf node 1-2<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><div class="" style=""><div class="devui-checkbox unchecked"><label title class="devui-checkbox--md" style="width:auto;"><input class="devui-checkbox__input" type="checkbox" indeterminate="false"><span style="" class="devui-checkbox__material devui-checkbox--no-label devui-checkbox__default-background"><span class="devui-checkbox__halfchecked-bg"></span><svg viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="devui-checkbox__tick-wrap"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon fill-rule="nonzero" points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043" class="devui-checkbox__tick"></polygon></g></svg></span><span class="devui-checkbox__label-text"><!----></span></label></div></div><!--[--><span class="devui-tree__node-title select-disabled">Leaf node 2<!----></span><!--]--><!----></div><!----></div></div><!--]--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>通过<code>disableToggle</code>/<code>disableSelect</code>/<code>disableCheck</code>分别禁用展开/收起、点击选择、勾选状态。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-tree</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data<span class="token punctuation">&quot;</span></span> <span class="token attr-name">check</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-tree</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node 1&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">expanded</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node 1-1&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">disableToggle</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            <span class="token literal-property property">disableSelect</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            <span class="token literal-property property">disableCheck</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 1-1-1&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 1-2&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">disableCheck</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 2&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">disableSelect</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      data<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="自定义图标" tabindex="-1">自定义图标 <a class="header-anchor" href="#自定义图标" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-tree"><!--[--><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><!--[--><span><svg style="transform:;margin-left:-2.5px;margin-right:14.5px;cursor:pointer;" viewbox="0 0 1024 1024" width="12" height="12"><path d="M204.58705 951.162088 204.58705 72.836889 819.41295 511.998977Z" fill="#8a8e99"></path></svg></span><!--]--><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><!--[--><svg style="margin-right:8px;" viewbox="0 0 16 16" width="16" height="16"><path d="M14,6 L14,5 L7.58578644,5 L5.58578644,3 L2,3 L2,6 L14,6 Z M14,7 L2,7 L2,13 L14,13 L14,7 Z M1,2 L6,2 L8,4 L15,4 L15,14 L1,14 L1,2 Z" stroke-width="1" fill="#8a8e99"></path></svg> Parent node 1<!--]--><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><!--[--><span class="devui-tree-node__indent"></span><!--]--><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><!--[--><svg style="margin-right:8px;" viewbox="0 0 16 16" width="16" height="16"><path d="M13,6 L9,6 L9,5 L9,2 L3,2 L3,14 L13,14 L13,6 Z M12.5857864,5 L10,2.41421356 L10,5 L12.5857864,5 Z M2,1 L10,1 L14,5 L14,15 L2,15 L2,1 Z" stroke-width="1" fill="#8a8e99"></path></svg> Leaf node 2<!--]--><!--]--><!----></div><!----></div></div><!--]--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>通过<code>content</code>插槽可以自定义节点内容，比如在节点内容前面增加一个图标；通过<code>icon</code>插槽可以自定义展开/收起的图标。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-tree</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ nodeData }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">margin-right</span><span class="token punctuation">:</span> 8px</span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0 0 16 16<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>16<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>16<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span>
          <span class="token attr-name">:d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>`${
            nodeData.isLeaf
              ? &#39;M13,6 L9,6 L9,5 L9,2 L3,2 L3,14 L13,14 L13,6 Z M12.5857864,5 L10,2.41421356 L10,5 L12.5857864,5 Z M2,1 L10,1 L14,5 L14,15 L2,15 L2,1 Z&#39;
              : nodeData.expanded
              ? &#39;M16,6 L14,14 L2,14 L0,6 L16,6 Z M14.7192236,7 L1.28077641,7 L2.78077641,13 L13.2192236,13 L14.7192236,7 Z M6,1 L8,3 L15,3 L15,5 L14,5 L14,4 L7.58578644,4 L5.58578644,2 L2,2 L2,5 L1,5 L1,1 L6,1 Z&#39;
              : &#39;M14,6 L14,5 L7.58578644,5 L5.58578644,3 L2,3 L2,6 L14,6 Z M14,7 L2,7 L2,13 L14,13 L14,7 Z M1,2 L6,2 L8,4 L15,4 L15,14 L1,14 L1,2 Z&#39;
          }`<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#8a8e99<span class="token punctuation">&quot;</span></span>
        <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>path</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">&gt;</span></span>
      {{ nodeData.label }}
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ nodeData, toggleNode }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nodeData.isLeaf<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>devui-tree-node__indent<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span>
        <span class="token attr-name">v-else</span>
        <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>
          (event) =&gt; {
            event.stopPropagation();
            toggleNode(nodeData);
          }
        <span class="token punctuation">&quot;</span></span>
      <span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span>
          <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ transform: nodeData.expanded ? &#39;rotate(90deg)&#39; : &#39;&#39;, marginLeft: &#39;-2.5px&#39;, marginRight: &#39;14.5px&#39;, cursor: &#39;pointer&#39; }<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0 0 1024 1024<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>12<span class="token punctuation">&quot;</span></span>
        <span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>M204.58705 951.162088 204.58705 72.836889 819.41295 511.998977Z<span class="token punctuation">&quot;</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#8a8e99<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>path</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-tree</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node 1&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node 1-1&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 1-1-1&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 1-2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      data<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="节点合并" tabindex="-1">节点合并 <a class="header-anchor" href="#节点合并" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-tree"><!--[--><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon mr-xs"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#252b3a"></rect><path fill="#252b3a" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">Parent node 1<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon mr-xs"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#252b3a"></rect><path fill="#252b3a" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">Parent node 2<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon mr-xs"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#252b3a"></rect><path fill="#252b3a" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">Parent node 3<!----></span><!--]--><!----></div><!----></div></div><!--]--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><!----><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-tree</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>treeRef<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-tree</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> onMounted <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> treeRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node 1&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node 1-1&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
              <span class="token punctuation">{</span>
                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node 1-1-1&#39;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
                  <span class="token punctuation">{</span>
                    <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node 1-1-1-1&#39;</span><span class="token punctuation">,</span>
                  <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token punctuation">]</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node 2&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node 2-1&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
              <span class="token punctuation">{</span>
                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 2-1-1&#39;</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
              <span class="token punctuation">{</span>
                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 2-1-2&#39;</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node 3&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 3-1&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
              <span class="token punctuation">{</span>
                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 3-1-1&#39;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
                  <span class="token punctuation">{</span>
                    <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 3-1-1-1&#39;</span><span class="token punctuation">,</span>
                  <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token punctuation">]</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 3-2&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      treeRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>treeFactory<span class="token punctuation">.</span><span class="token function">mergeTreeNodes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      treeRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>treeFactory<span class="token punctuation">.</span><span class="token function">expandAllNodes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      data<span class="token punctuation">,</span>
      treeRef<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="操作按钮" tabindex="-1">操作按钮 <a class="header-anchor" href="#操作按钮" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="devui-tree"><!--[--><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon mr-xs"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#252b3a"></rect><path fill="#252b3a" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">Parent node 1<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">Parent node 2<!----></span><!--]--><!----></div><!----></div></div><!--]--></div><button class="devui-button devui-button--solid devui-button--solid--primary devui-button--sm"><div class="loading-icon__container" style="display:none;"><div class="devui-icon__container devui-icon--no-slots button-icon-loading"><!----><i class="icon icon-loading button-icon-loading" style="font-size:inherit;color:#BBDEFB;transform:rotate(undefineddeg);"></i><!----></div></div><span class="button-content"><!--[-->Add<!--]--></span></button><button class="devui-button devui-button--outline devui-button--outline--secondary devui-button--sm ml-xs"><div class="loading-icon__container" style="display:none;"><div class="devui-icon__container devui-icon--no-slots button-icon-loading"><!----><i class="icon icon-loading button-icon-loading" style="font-size:inherit;color:#BBDEFB;transform:rotate(undefineddeg);"></i><!----></div></div><span class="button-content"><!--[-->Delete<!--]--></span></button></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>可定义外部操作按钮、悬浮按钮。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-tree</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>treeRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">operate</span> <span class="token attr-name">@select-change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selectChange<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-tree</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>solid<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>addNode<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Add<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ml-xs<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>deleteNode<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> treeRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> selectedNode <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node 1&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">&#39;node-1&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 1-1&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">&#39;node-1-1&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 1-1-1&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">&#39;node-1-1-1&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node 1-2&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">&#39;node-1-2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node 2&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">&#39;node-2&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">addNode</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>selectedNode<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">const</span> childs <span class="token operator">=</span> treeRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>treeFactory<span class="token punctuation">.</span><span class="token function">getChildren</span><span class="token punctuation">(</span>selectedNode<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">let</span> labelName <span class="token operator">=</span> <span class="token string">&#39;new node&#39;</span><span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>childs <span class="token operator">||</span> childs<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        labelName <span class="token operator">=</span> selectedNode<span class="token punctuation">.</span>value<span class="token punctuation">.</span>label <span class="token operator">+</span> <span class="token string">&#39;-1&#39;</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>childs<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        labelName <span class="token operator">=</span> selectedNode<span class="token punctuation">.</span>value<span class="token punctuation">.</span>label <span class="token operator">+</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>childs<span class="token punctuation">.</span>length <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>labelName<span class="token punctuation">.</span><span class="token function">startsWith</span><span class="token punctuation">(</span><span class="token string">&#39;Parent&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        labelName <span class="token operator">=</span> labelName<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">&#39;Parent&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;Leaf&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      treeRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>treeFactory<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>selectedNode<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> labelName <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">deleteNode</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>selectedNode<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      treeRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>treeFactory<span class="token punctuation">.</span><span class="token function">removeNode</span><span class="token punctuation">(</span>selectedNode<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">selectChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">selected</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      selectedNode<span class="token punctuation">.</span>value <span class="token operator">=</span> selected<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      treeRef<span class="token punctuation">,</span>
      data<span class="token punctuation">,</span>
      addNode<span class="token punctuation">,</span>
      deleteNode<span class="token punctuation">,</span>
      selectChange<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="搜索过滤" tabindex="-1">搜索过滤 <a class="header-anchor" href="#搜索过滤" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><label class="devui-search devui-search--md devui-search--right mb10" style="width:300px;"><!----><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><input value class="devui-input__inner" placeholder="search your node..." maxlength="9007199254740991" type="text"><!----></div><!----></div><!----><div class="devui-search__icon"><svg viewbox="0 0 1024 1024" version="1.1" width="12px" height="12px"><path d="M1005.312 914.752l-198.528-198.464A448 448 0 1 0 0 448a448 448 0 0 0 716.288       358.784l198.4 198.4a64 64 0 1 0 90.624-90.432zM448 767.936A320 320 0 1 1 448 128a320 320 0 0 1 0 640z" fill="#262626" p-id="32547"></path></svg></div></label><label class="devui-search devui-search--md devui-search--right mb10" style="width:300px;"><!----><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><input value class="devui-input__inner" placeholder="filter your node..." maxlength="9007199254740991" type="text"><!----></div><!----></div><!----><div class="devui-search__icon"><svg viewbox="0 0 1024 1024" version="1.1" width="12px" height="12px"><path d="M1005.312 914.752l-198.528-198.464A448 448 0 1 0 0 448a448 448 0 0 0 716.288       358.784l198.4 198.4a64 64 0 1 0 90.624-90.432zM448 767.936A320 320 0 1 1 448 128a320 320 0 0 1 0 640z" fill="#262626" p-id="32547"></path></svg></div></label><div class="devui-row devui-row__align--middle devui-row__justify--start mb10"><!--[--><label class="devui-search devui-search--md devui-search--right" style="width:300px;"><!----><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><input value class="devui-input__inner" placeholder="filter your node by custom key..." maxlength="9007199254740991" type="text"><!----></div><!----></div><!----><div class="devui-search__icon"><svg viewbox="0 0 1024 1024" version="1.1" width="12px" height="12px"><path d="M1005.312 914.752l-198.528-198.464A448 448 0 1 0 0 448a448 448 0 0 0 716.288       358.784l198.4 198.4a64 64 0 1 0 90.624-90.432zM448 767.936A320 320 0 1 1 448 128a320 320 0 0 1 0 640z" fill="#262626" p-id="32547"></path></svg></div></label><span class="ml8"><!--[--><div class="devui-icon__container devui-icon--no-slots"><!----><i class="icon icon-help" style="font-size:inherit;color:inherit;transform:rotate(undefineddeg);"></i><!----></div><!--teleport start--><!--teleport end--><!--]--></span><!--]--></div><div class="devui-row devui-row__align--middle devui-row__justify--start mb10"><!--[--><label class="devui-search devui-search--md devui-search--right" style="width:300px;"><!----><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><input value class="devui-input__inner" placeholder="filter your node by Regex..." maxlength="9007199254740991" type="text"><!----></div><!----></div><!----><div class="devui-search__icon"><svg viewbox="0 0 1024 1024" version="1.1" width="12px" height="12px"><path d="M1005.312 914.752l-198.528-198.464A448 448 0 1 0 0 448a448 448 0 0 0 716.288       358.784l198.4 198.4a64 64 0 1 0 90.624-90.432zM448 767.936A320 320 0 1 1 448 128a320 320 0 0 1 0 640z" fill="#262626" p-id="32547"></path></svg></div></label><span class="ml8"><!--[--><div class="devui-icon__container devui-icon--no-slots"><!----><i class="icon icon-help" style="font-size:inherit;color:inherit;transform:rotate(undefineddeg);"></i><!----></div><!--teleport start--><!--teleport end--><!--]--></span><!--]--></div><div class="devui-tree"><!--[--><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">parent node 1<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon mr-xs"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#252b3a"></rect><path fill="#252b3a" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">parent node 2<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon mr-xs"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#252b3a"></rect><path fill="#252b3a" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">parent node 3<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon mr-xs"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#252b3a"></rect><path fill="#252b3a" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">parent node 4<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon mr-xs"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#252b3a"></rect><path fill="#252b3a" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">parent node 5<!----></span><!--]--><!----></div><!----></div></div><!--]--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>通过 <code>treeFactory</code> 中的<code>searchTree</code>方法可以搜索节点或者过滤节点。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-search</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb10<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 300px</span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">is-keyup-search</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search your node...<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:delay</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1000<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@search</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onSearch<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-search</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-search</span>
    <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb10<span class="token punctuation">&quot;</span></span>
    <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 300px</span><span class="token punctuation">&quot;</span></span></span>
    <span class="token attr-name">is-keyup-search</span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filter your node...<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:delay</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1000<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">@search</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onSearch1<span class="token punctuation">&quot;</span></span>
  <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-search</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb10<span class="token punctuation">&quot;</span></span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>middle<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-search</span>
      <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 300px</span><span class="token punctuation">&quot;</span></span></span>
      <span class="token attr-name">is-keyup-search</span>
      <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filter your node by custom key...<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">:delay</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1000<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">@search</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onSearch2<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-search</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ml8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-tooltip</span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>使用自定义的属性搜索匹配树节点<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>help<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-tooltip</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-row</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb10<span class="token punctuation">&quot;</span></span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>middle<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-search</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 300px</span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">is-keyup-search</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filter your node by Regex...<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:delay</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1000<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@search</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onSearch3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-search</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ml8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-tooltip</span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>使用正则表达式限定搜索范围<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>help<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-tooltip</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-row</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-tree</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>treeRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-tree</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> treeRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;parent node 1&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">customSearchValue</span><span class="token operator">:</span> <span class="token string">&#39;a&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;parent node 2&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">customSearchValue</span><span class="token operator">:</span> <span class="token string">&#39;b&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;child node 2-1&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">customSearchValue</span><span class="token operator">:</span> <span class="token string">&#39;c&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
              <span class="token punctuation">{</span>
                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;child node 2-1-1&#39;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">customSearchValue</span><span class="token operator">:</span> <span class="token string">&#39;d&#39;</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
              <span class="token punctuation">{</span>
                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;child node 2-1-2&#39;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">customSearchValue</span><span class="token operator">:</span> <span class="token string">&#39;e&#39;</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;child node 2-2&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">customSearchValue</span><span class="token operator">:</span> <span class="token string">&#39;f&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
              <span class="token punctuation">{</span>
                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;child node 2-2-1&#39;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">customSearchValue</span><span class="token operator">:</span> <span class="token string">&#39;g&#39;</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
              <span class="token punctuation">{</span>
                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;child node 2-2-2&#39;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">customSearchValue</span><span class="token operator">:</span> <span class="token string">&#39;h&#39;</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;parent node 3&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">customSearchValue</span><span class="token operator">:</span> <span class="token string">&#39;i&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;child node 3-1&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">customSearchValue</span><span class="token operator">:</span> <span class="token string">&#39;j&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;child node 3-2&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">customSearchValue</span><span class="token operator">:</span> <span class="token string">&#39;k&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;parent node 4&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">customSearchValue</span><span class="token operator">:</span> <span class="token string">&#39;l&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;child node 4-1&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">customSearchValue</span><span class="token operator">:</span> <span class="token string">&#39;m&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;child node 4-2&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">customSearchValue</span><span class="token operator">:</span> <span class="token string">&#39;n&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;parent node 5&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">customSearchValue</span><span class="token operator">:</span> <span class="token string">&#39;o&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;child node 5-1&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">customSearchValue</span><span class="token operator">:</span> <span class="token string">&#39;p&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;child node 5-2&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">customSearchValue</span><span class="token operator">:</span> <span class="token string">&#39;q&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">onSearch</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      treeRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>treeFactory<span class="token punctuation">.</span><span class="token function">searchTree</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">isFilter</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">onSearch1</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      treeRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>treeFactory<span class="token punctuation">.</span><span class="token function">searchTree</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">isFilter</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">onSearch2</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      treeRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>treeFactory<span class="token punctuation">.</span><span class="token function">searchTree</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">isFilter</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">matchKey</span><span class="token operator">:</span> <span class="token string">&#39;customSearchValue&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">onSearch3</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> regex <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token string">&#39;^&#39;</span> <span class="token operator">+</span> value <span class="token operator">+</span> <span class="token string">&#39;[\s\S]*&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      treeRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>treeFactory<span class="token punctuation">.</span><span class="token function">searchTree</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">isFilter</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">pattern</span><span class="token operator">:</span> regex <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      treeRef<span class="token punctuation">,</span>
      data<span class="token punctuation">,</span>
      onSearch<span class="token punctuation">,</span>
      onSearch1<span class="token punctuation">,</span>
      onSearch2<span class="token punctuation">,</span>
      onSearch3<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.mb10</span> <span class="token punctuation">{</span>
  <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.ml8</span> <span class="token punctuation">{</span>
  <span class="token property">margin-left</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="虚拟滚动" tabindex="-1">虚拟滚动 <a class="header-anchor" href="#虚拟滚动" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><label class="devui-search devui-search--md devui-search--right mb10" style="width:300px;"><!----><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><input value class="devui-input__inner" placeholder="search your node..." maxlength="9007199254740991" type="text"><!----></div><!----></div><!----><div class="devui-search__icon"><svg viewbox="0 0 1024 1024" version="1.1" width="12px" height="12px"><path d="M1005.312 914.752l-198.528-198.464A448 448 0 1 0 0 448a448 448 0 0 0 716.288       358.784l198.4 198.4a64 64 0 1 0 90.624-90.432zM448 767.936A320 320 0 1 1 448 128a320 320 0 0 1 0 640z" fill="#262626" p-id="32547"></path></svg></div></label><label class="devui-search devui-search--md devui-search--right mb10" style="width:300px;"><!----><div class="devui-input devui-input--md" style=""><!----><div class="devui-input__wrapper"><input value class="devui-input__inner" placeholder="filter your node..." maxlength="9007199254740991" type="text"><!----></div><!----></div><!----><div class="devui-search__icon"><svg viewbox="0 0 1024 1024" version="1.1" width="12px" height="12px"><path d="M1005.312 914.752l-198.528-198.464A448 448 0 1 0 0 448a448 448 0 0 0 716.288       358.784l198.4 198.4a64 64 0 1 0 90.624-90.432zM448 767.936A320 320 0 1 1 448 128a320 320 0 0 1 0 640z" fill="#262626" p-id="32547"></path></svg></div></label><div style="position:relative;" class="devui-tree"><div style="max-height:300px;overflow-y:hidden;overflow-anchor:none;"><div style="height:3000px;position:relative;overflow:hidden;"><div style="display:flex;flex-direction:column;transform:translateY(0px);"><!--[--><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon mr-xs"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#252b3a"></rect><path fill="#252b3a" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">Parent node 0<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">Parent node 1<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon mr-xs"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#252b3a"></rect><path fill="#252b3a" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">Parent node 2<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">Parent node 3<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon mr-xs"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#252b3a"></rect><path fill="#252b3a" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">Parent node 4<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">Parent node 5<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon mr-xs"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#252b3a"></rect><path fill="#252b3a" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">Parent node 6<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">Parent node 7<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon mr-xs"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#252b3a"></rect><path fill="#252b3a" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">Parent node 8<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">Parent node 9<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon mr-xs"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#252b3a"></rect><path fill="#252b3a" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">Parent node 10<!----></span><!--]--><!----></div><!----></div></div><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">Parent node 11<!----></span><!--]--><!----></div><!----></div></div><!--]--></div></div></div><div style="width:8px;position:absolute;display:none;"><div style="width:100%;height:30px;top:0px;position:absolute;background:rgba(0, 0, 0, 0.5);border-radius:99px;cursor:pointer;user-select:none;"></div></div></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>使用虚拟滚动处理大数据量的加载问题。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-search</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb10<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 300px</span><span class="token punctuation">&quot;</span></span></span> <span class="token attr-name">is-keyup-search</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>search your node...<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:delay</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1000<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@search</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onSearch<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-search</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-search</span>
    <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb10<span class="token punctuation">&quot;</span></span>
    <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 300px</span><span class="token punctuation">&quot;</span></span></span>
    <span class="token attr-name">is-keyup-search</span>
    <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filter your node...<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:delay</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1000<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">@search</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onSearch1<span class="token punctuation">&quot;</span></span>
  <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-search</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-tree</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>300<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>treeRef<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-tree</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> onMounted <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> treeRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token operator">...</span>Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">length</span><span class="token operator">:</span> <span class="token number">100</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Parent node &#39;</span> <span class="token operator">+</span> index<span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span>
          index <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span>
            <span class="token operator">?</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">length</span><span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> index2</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Leaf node &#39;</span> <span class="token operator">+</span> index <span class="token operator">+</span> <span class="token string">&#39;-&#39;</span> <span class="token operator">+</span> index2<span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
            <span class="token operator">:</span> <span class="token keyword">undefined</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      treeRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>treeFactory<span class="token punctuation">.</span><span class="token function">expandAllNodes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token function-variable function">onSearch</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      treeRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>treeFactory<span class="token punctuation">.</span><span class="token function">searchTree</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">isFilter</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">onSearch1</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      treeRef<span class="token punctuation">.</span>value<span class="token punctuation">.</span>treeFactory<span class="token punctuation">.</span><span class="token function">searchTree</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">isFilter</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      data<span class="token punctuation">,</span>
      treeRef<span class="token punctuation">,</span>
      onSearch<span class="token punctuation">,</span>
      onSearch1<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="可拖拽树" tabindex="-1">可拖拽树 <a class="header-anchor" href="#可拖拽树" aria-hidden="true">#</a></h3><div class="demo-block demo-index" data-v-2b1aa91d><!--[--><div class="source" data-v-2b1aa91d><!--[--><div><div class="mb-0">Default</div><div class="devui-tree mb-2"><!--[--><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">parent node 1<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node devui-tree__node--open" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon svg-icon-close mr-xs"><g stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#5e7ce0"></rect><rect x="4" y="7" width="8" height="2" fill="#5e7ce0"></rect></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">parent node 2<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node devui-tree__node--open" style="padding-left:24px;"><!--[--><span class="devui-tree__node-vline" style="height:30px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:9px;"></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon svg-icon-close mr-xs"><g stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#5e7ce0"></rect><rect x="4" y="7" width="8" height="2" fill="#5e7ce0"></rect></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">leaf node 2-1<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node" style="padding-left:48px;"><!--[--><span class="devui-tree__node-vline" style="height:30px;left:33px;top:0px;"></span><span class="devui-tree__node-vline" style="height:30px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:33px;"></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">leaf node 2-1-1<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node" style="padding-left:48px;"><!--[--><span class="devui-tree__node-vline" style="height:15px;left:33px;top:0px;"></span><span class="devui-tree__node-vline" style="height:30px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:33px;"></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">leaf node 2-1-2<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node" style="padding-left:24px;"><!--[--><span class="devui-tree__node-vline" style="height:15px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:9px;"></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon mr-xs"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#252b3a"></rect><path fill="#252b3a" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">leaf node 2-2<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node devui-tree__node--open" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon svg-icon-close mr-xs"><g stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#5e7ce0"></rect><rect x="4" y="7" width="8" height="2" fill="#5e7ce0"></rect></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">parent node 3<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node" style="padding-left:24px;"><!--[--><span class="devui-tree__node-vline" style="height:30px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:9px;"></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">leaf node 3-1<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node" style="padding-left:24px;"><!--[--><span class="devui-tree__node-vline" style="height:15px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:9px;"></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">leaf node 3-2<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node devui-tree__node--open" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon svg-icon-close mr-xs"><g stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#5e7ce0"></rect><rect x="4" y="7" width="8" height="2" fill="#5e7ce0"></rect></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">parent node 4<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node" style="padding-left:24px;"><!--[--><span class="devui-tree__node-vline" style="height:30px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:9px;"></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">leaf node 4-1<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node" style="padding-left:24px;"><!--[--><span class="devui-tree__node-vline" style="height:15px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:9px;"></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">leaf node 4-2<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node devui-tree__node--open" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon svg-icon-close mr-xs"><g stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#5e7ce0"></rect><rect x="4" y="7" width="8" height="2" fill="#5e7ce0"></rect></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">parent node 5<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node" style="padding-left:24px;"><!--[--><span class="devui-tree__node-vline" style="height:30px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:9px;"></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">leaf node 5-1<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node" style="padding-left:24px;"><!--[--><span class="devui-tree__node-vline" style="height:15px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:9px;"></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">leaf node 5-2<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><!--]--></div><div class="mb-0">Sortable</div><div class="devui-tree mb-2"><!--[--><div class="devui-tree__node" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">parent node 1<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node devui-tree__node--open" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon svg-icon-close mr-xs"><g stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#5e7ce0"></rect><rect x="4" y="7" width="8" height="2" fill="#5e7ce0"></rect></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">parent node 2<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node devui-tree__node--open" style="padding-left:24px;"><!--[--><span class="devui-tree__node-vline" style="height:30px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:9px;"></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon svg-icon-close mr-xs"><g stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#5e7ce0"></rect><rect x="4" y="7" width="8" height="2" fill="#5e7ce0"></rect></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">leaf node 2-1<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node" style="padding-left:48px;"><!--[--><span class="devui-tree__node-vline" style="height:30px;left:33px;top:0px;"></span><span class="devui-tree__node-vline" style="height:30px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:33px;"></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">leaf node 2-1-1<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node" style="padding-left:48px;"><!--[--><span class="devui-tree__node-vline" style="height:15px;left:33px;top:0px;"></span><span class="devui-tree__node-vline" style="height:30px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:33px;"></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">leaf node 2-1-2<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node" style="padding-left:24px;"><!--[--><span class="devui-tree__node-vline" style="height:15px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:9px;"></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon mr-xs"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#252b3a"></rect><path fill="#252b3a" d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"></path></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">leaf node 2-2<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node devui-tree__node--open" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon svg-icon-close mr-xs"><g stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#5e7ce0"></rect><rect x="4" y="7" width="8" height="2" fill="#5e7ce0"></rect></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">parent node 3<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node" style="padding-left:24px;"><!--[--><span class="devui-tree__node-vline" style="height:30px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:9px;"></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">leaf node 3-1<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node" style="padding-left:24px;"><!--[--><span class="devui-tree__node-vline" style="height:15px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:9px;"></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">leaf node 3-2<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node devui-tree__node--open" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon svg-icon-close mr-xs"><g stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#5e7ce0"></rect><rect x="4" y="7" width="8" height="2" fill="#5e7ce0"></rect></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">parent node 4<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node" style="padding-left:24px;"><!--[--><span class="devui-tree__node-vline" style="height:30px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:9px;"></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">leaf node 4-1<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node" style="padding-left:24px;"><!--[--><span class="devui-tree__node-vline" style="height:15px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:9px;"></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">leaf node 4-2<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node devui-tree__node--open" style="padding-left:0px;"><!--[--><!--]--><span class="" style=""></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><svg width="16px" height="16px" viewbox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-icon svg-icon-close mr-xs"><g stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#5e7ce0"></rect><rect x="4" y="7" width="8" height="2" fill="#5e7ce0"></rect></g></svg></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">parent node 5<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node" style="padding-left:24px;"><!--[--><span class="devui-tree__node-vline" style="height:30px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:9px;"></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">leaf node 5-1<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><div class="devui-tree__node" style="padding-left:24px;"><!--[--><span class="devui-tree__node-vline" style="height:15px;left:9px;top:0px;"></span><!--]--><span class="devui-tree__node-hline" style="left:9px;"></span><div class="devui-tree__node-content" draggable="true"><!--[--><span class="devui-tree__node-folder"><span class="devui-tree__node-indent"></span></span><!--]--><div class="devui-tree__node-content--value-wrapper" style="height:30px;"><!----><!--[--><span class="devui-tree__node-title">leaf node 5-2<!----></span><!--]--><!--[--><div class="devui-tree__node--drop-top"></div><div class="devui-tree__node--drop-bottom"></div><div class="devui-tree__node--drop-left"></div><div class="devui-tree__node--drop-right"></div><!--]--></div><!----></div></div><!--]--></div></div><!--]--></div><div class="meta" data-v-2b1aa91d><div class="description" data-v-2b1aa91d><!--[--><div>通过 OperableTree 的 dragdrop 属性配置节点的拖拽功能，并支持外部元素拖拽入树。</div><!--]--></div><div class="highlight" data-v-2b1aa91d><!--[--><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-tree</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data<span class="token punctuation">&quot;</span></span> <span class="token attr-name">dragdrop</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-tree</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Sortable<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>d-tree</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mb-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:dragdrop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ dropPrev: true, dropNext: true, dropInner: true }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>d-tree</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;parent node 1&#39;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;parent node 2&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">expanded</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;leaf node 2-1&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">expanded</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
              <span class="token punctuation">{</span>
                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;leaf node 2-1-1&#39;</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
              <span class="token punctuation">{</span>
                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;leaf node 2-1-2&#39;</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;leaf node 2-2&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
              <span class="token punctuation">{</span>
                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;leaf node 2-2-1&#39;</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
              <span class="token punctuation">{</span>
                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;leaf node 2-2-2&#39;</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;parent node 3&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">expanded</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;leaf node 3-1&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;leaf node 3-2&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;parent node 4&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">expanded</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;leaf node 4-1&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;leaf node 4-2&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;parent node 5&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">expanded</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;leaf node 5-1&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;leaf node 5-2&#39;</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      data<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><!--]--></div></div><!--]--><div class="demo-block-control" data-v-2b1aa91d><i class="control-icon icon-caret-down" data-v-2b1aa91d></i><span style="display:none;" class="control-text" data-v-2b1aa91d>显示代码</span><div class="control-button-wrap" data-v-2b1aa91d><span style="display:none;" class="control-button copy-button" data-v-2b1aa91d>复制代码片段</span></div></div></div><h3 id="tree-参数" tabindex="-1">Tree 参数 <a class="header-anchor" href="#tree-参数" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">参数名</th><th style="text-align:left;">类型</th><th style="text-align:left;">默认值</th><th style="text-align:left;">说明</th><th style="text-align:left;">跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:left;">data</td><td style="text-align:left;"><a href="#itreenode">ITreeNode[]</a></td><td style="text-align:left;"><code>[]</code></td><td style="text-align:left;">可选，树形结构数据</td><td style="text-align:left;"><a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a></td></tr><tr><td style="text-align:left;">check</td><td style="text-align:left;"><a href="#icheck">ICheck</a></td><td style="text-align:left;"><code>false</code></td><td style="text-align:left;">可选，是否启用勾选功能</td><td style="text-align:left;"><a href="#%E5%8F%AF%E5%8B%BE%E9%80%89">可勾选</a></td></tr><tr><td style="text-align:left;">dragdrop</td><td style="text-align:left;"><a href="#idragdrop">IDragdrop</a></td><td style="text-align:left;"><code>false</code></td><td style="text-align:left;">可选，是否启用可拖拽功能</td><td style="text-align:left;"><a href="#%E5%8F%AF%E6%8B%96%E6%8B%BD%E6%A0%91">可拖拽树</a></td></tr></tbody></table><h3 id="tree-事件" tabindex="-1">Tree 事件 <a class="header-anchor" href="#tree-事件" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">事件名</th><th style="text-align:left;">回调参数</th><th style="text-align:left;">说明</th><th style="text-align:left;">跳转 Demo</th></tr></thead><tbody><tr><td style="text-align:left;">toggle-change</td><td style="text-align:left;"><code>Function(node)</code></td><td style="text-align:left;">节点展开/收起的回调事件，返回选中的节点对象</td><td style="text-align:left;"><a href="#%E5%8F%AF%E5%8B%BE%E9%80%89">可勾选</a></td></tr><tr><td style="text-align:left;">check-change</td><td style="text-align:left;"><code>Function(node)</code></td><td style="text-align:left;">节点勾选的回调事件，返回选中的节点对象</td><td style="text-align:left;"><a href="#%E5%8F%AF%E5%8B%BE%E9%80%89">可勾选</a></td></tr><tr><td style="text-align:left;">select-change</td><td style="text-align:left;"><code>Function(node)</code></td><td style="text-align:left;">节点选中的回调事件，返回选中的节点对象</td><td style="text-align:left;"><a href="#%E5%8F%AF%E5%8B%BE%E9%80%89">可勾选</a></td></tr><tr><td style="text-align:left;">node-click</td><td style="text-align:left;"><code>Function(node)</code></td><td style="text-align:left;">节点点击事件，返回点击的节点对象</td><td style="text-align:left;"><a href="#%E5%8F%AF%E5%8B%BE%E9%80%89">可勾选</a></td></tr><tr><td style="text-align:left;">lazy-node</td><td style="text-align:left;"><code>Function(node, callback)</code></td><td style="text-align:left;">节点懒加载事件，返回点击的节点对象及回调函数</td><td style="text-align:left;"><a href="#%E8%8A%82%E7%82%B9%E6%87%92%E5%8A%A0%E8%BD%BD">节点懒加载</a></td></tr></tbody></table><h3 id="tree-插槽" tabindex="-1">Tree 插槽 <a class="header-anchor" href="#tree-插槽" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">插槽名</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;">default</td><td style="text-align:left;">自定义节点</td></tr><tr><td style="text-align:left;">content</td><td style="text-align:left;">自定义节点内容</td></tr><tr><td style="text-align:left;">icon</td><td style="text-align:left;">自定义展开/收起按钮</td></tr><tr><td style="text-align:left;">loading</td><td style="text-align:left;">自定义节点懒加载时 loading 显示内容</td></tr></tbody></table><h3 id="treenode-参数" tabindex="-1">TreeNode 参数 <a class="header-anchor" href="#treenode-参数" aria-hidden="true">#</a></h3><table><thead><tr><th style="text-align:left;">参数名</th><th style="text-align:left;">类型</th><th style="text-align:left;">默认值</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;">data</td><td style="text-align:left;"><a href="#itreenode">ITreeNode</a></td><td style="text-align:left;"><code>[]</code></td><td style="text-align:left;">可选，节点数据</td></tr><tr><td style="text-align:left;">check</td><td style="text-align:left;"><a href="#icheck">ICheck</a></td><td style="text-align:left;"><code>false</code></td><td style="text-align:left;">可选，是否启用勾选功能</td></tr><tr><td style="text-align:left;">dragdrop</td><td style="text-align:left;"><a href="#idragdrop">IDragdrop</a></td><td style="text-align:left;"><code>false</code></td><td style="text-align:left;">可选，是否启用可拖拽功能</td></tr><tr><td style="text-align:left;">height</td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;"><code>-</code></td><td style="text-align:left;">可选，设置启用虚拟滚动</td></tr></tbody></table><h3 id="tree-类型定义" tabindex="-1">Tree 类型定义 <a class="header-anchor" href="#tree-类型定义" aria-hidden="true">#</a></h3><h4 id="itreenode" tabindex="-1">ITreeNode <a class="header-anchor" href="#itreenode" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">interface</span> <span class="token class-name">ITreeNode</span> <span class="token punctuation">{</span>
  label<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  id<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  children<span class="token operator">?</span><span class="token operator">:</span> ITreeNode<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

  selected<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  checked<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  expanded<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>

  disableSelect<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  disableCheck<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  disableToggle<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="icheck" tabindex="-1">ICheck <a class="header-anchor" href="#icheck" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">ICheck</span> <span class="token operator">=</span> <span class="token builtin">boolean</span> <span class="token operator">|</span> <span class="token string">&#39;upward&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;downward&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;both&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;none&#39;</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="idragdrop" tabindex="-1">IDragdrop <a class="header-anchor" href="#idragdrop" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">IDragdrop</span> <span class="token operator">=</span>
  <span class="token operator">|</span> <span class="token builtin">boolean</span>
  <span class="token operator">|</span> <span class="token punctuation">{</span>
      dropPrev<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
      dropNext<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
      dropInner<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="treefactory" tabindex="-1">treeFactory <a class="header-anchor" href="#treefactory" aria-hidden="true">#</a></h3><p><code>treeFactory</code>是组件内部暴露出来的一些数据和方法，当自定义树结构的时候会用到。</p><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">TreeFactory</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// 扁平化处理后的数据，IInnerTreeNode 见下表</span>
  treeData<span class="token operator">:</span> Ref<span class="token operator">&lt;</span>IInnerTreeNode<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>

  <span class="token comment">// 获取节点层级</span>
  <span class="token function-variable function">getLevel</span><span class="token operator">:</span> <span class="token punctuation">(</span>node<span class="token operator">:</span> IInnerTreeNode<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">number</span><span class="token punctuation">;</span>

  <span class="token comment">// 获取某个节点的子节点</span>
  getChildren<span class="token operator">:</span> <span class="token punctuation">(</span>
    node<span class="token operator">:</span> IInnerTreeNode<span class="token punctuation">,</span>
    config<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      expanded<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span> <span class="token comment">// 是否只从展开了的节点中获取数据</span>
      recursive<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span> <span class="token comment">// 是否需要获取非直接子节点</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> IInnerTreeNode<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

  <span class="token comment">// 获取某个节点的父节点</span>
  <span class="token function-variable function">getParent</span><span class="token operator">:</span> <span class="token punctuation">(</span>node<span class="token operator">:</span> IInnerTreeNode<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> IInnerTreeNode<span class="token punctuation">;</span>

  <span class="token comment">// 获取当前是展开状态的节点</span>
  <span class="token function-variable function">getExpendedTree</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> ComputedRef<span class="token operator">&lt;</span>IInnerTreeNode<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>

  <span class="token comment">// 获取某个节点在扁平化数据结构中的索引</span>
  <span class="token function-variable function">getIndex</span><span class="token operator">:</span> <span class="token punctuation">(</span>node<span class="token operator">:</span> IInnerTreeNode<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">number</span><span class="token punctuation">;</span>

  <span class="token comment">// 设置某个节点的属性值</span>
  <span class="token function-variable function">setNodeValue</span><span class="token operator">:</span> <span class="token punctuation">(</span>node<span class="token operator">:</span> IInnerTreeNode<span class="token punctuation">,</span> key<span class="token operator">:</span> <span class="token keyword">keyof</span> IInnerTreeNode<span class="token punctuation">,</span> value<span class="token operator">:</span> valueof<span class="token operator">&lt;</span>IInnerTreeNode<span class="token operator">&gt;</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>

  <span class="token comment">// 展开节点，并触发`toggle-change`事件</span>
  <span class="token function-variable function">expandNode</span><span class="token operator">:</span> <span class="token punctuation">(</span>node<span class="token operator">:</span> IInnerTreeNode<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>

  <span class="token comment">// 收起节点，并触发`toggle-change`事件</span>
  <span class="token function-variable function">collapseNode</span><span class="token operator">:</span> <span class="token punctuation">(</span>node<span class="token operator">:</span> IInnerTreeNode<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>

  <span class="token comment">// 展开/收起节点</span>
  <span class="token function-variable function">toggleNode</span><span class="token operator">:</span> <span class="token punctuation">(</span>node<span class="token operator">:</span> IInnerTreeNode<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>

  <span class="token comment">// 展开所有节点</span>
  <span class="token function-variable function">expandAllNodes</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>

  <span class="token comment">// 单选，并触发`select-change`事件</span>
  <span class="token function-variable function">selectNode</span><span class="token operator">:</span> <span class="token punctuation">(</span>node<span class="token operator">:</span> IInnerTreeNode<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>

  <span class="token comment">// 取消单选，并触发`select-change`事件</span>
  <span class="token function-variable function">deselectNode</span><span class="token operator">:</span> <span class="token punctuation">(</span>node<span class="token operator">:</span> IInnerTreeNode<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>

  <span class="token comment">// 单选/取消单选，并触发`select-change`事件</span>
  <span class="token function-variable function">toggleSelectNode</span><span class="token operator">:</span> <span class="token punctuation">(</span>node<span class="token operator">:</span> IInnerTreeNode<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>

  <span class="token comment">// 获取已单选的节点</span>
  <span class="token function-variable function">getSelectedNode</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> IInnerTreeNode<span class="token punctuation">;</span>

  <span class="token comment">// 勾选，并触发`check-change`事件</span>
  <span class="token function-variable function">checkNode</span><span class="token operator">:</span> <span class="token punctuation">(</span>node<span class="token operator">:</span> IInnerTreeNode<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>

  <span class="token comment">// 取消勾选，并触发`check-change`事件</span>
  <span class="token function-variable function">uncheckNode</span><span class="token operator">:</span> <span class="token punctuation">(</span>node<span class="token operator">:</span> IInnerTreeNode<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>

  <span class="token comment">// 勾选/取消勾选，并触发`check-change`事件</span>
  <span class="token function-variable function">toggleCheckNode</span><span class="token operator">:</span> <span class="token punctuation">(</span>node<span class="token operator">:</span> IInnerTreeNode<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>

  <span class="token comment">// 获取已勾选的节点</span>
  <span class="token function-variable function">getCheckedNodes</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> IInnerTreeNode<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

  <span class="token comment">// 禁用节点单选</span>
  <span class="token function-variable function">disableSelectNode</span><span class="token operator">:</span> <span class="token punctuation">(</span>node<span class="token operator">:</span> IInnerTreeNode<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>

  <span class="token comment">// 禁用节点勾选</span>
  <span class="token function-variable function">disableCheckNode</span><span class="token operator">:</span> <span class="token punctuation">(</span>node<span class="token operator">:</span> IInnerTreeNode<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>

  <span class="token comment">// 禁用节点展开/收起</span>
  <span class="token function-variable function">disableToggleNode</span><span class="token operator">:</span> <span class="token punctuation">(</span>node<span class="token operator">:</span> IInnerTreeNode<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>

  <span class="token comment">// 启用节点单选</span>
  <span class="token function-variable function">enableSelectNode</span><span class="token operator">:</span> <span class="token punctuation">(</span>node<span class="token operator">:</span> IInnerTreeNode<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>

  <span class="token comment">// 启用节点勾选</span>
  <span class="token function-variable function">enableCheckNode</span><span class="token operator">:</span> <span class="token punctuation">(</span>node<span class="token operator">:</span> IInnerTreeNode<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>

  <span class="token comment">// 启用节点展开/收起</span>
  <span class="token function-variable function">enableToggleNode</span><span class="token operator">:</span> <span class="token punctuation">(</span>node<span class="token operator">:</span> IInnerTreeNode<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>

  <span class="token comment">// 当节点只有一个子节点时，合并显示</span>
  <span class="token function-variable function">mergeTreeNodes</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>

  <span class="token comment">// 懒加载某个节点的子节点</span>
  <span class="token function-variable function">lazyLoadNodes</span><span class="token operator">:</span> <span class="token punctuation">(</span>node<span class="token operator">:</span> IInnerTreeNode<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>

  <span class="token comment">// 搜索节点，参数为搜索关键字和搜索配置项，SearchFilterOption 见下表</span>
  <span class="token function-variable function">searchTree</span><span class="token operator">:</span> <span class="token punctuation">(</span>target<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> option<span class="token operator">:</span> SearchFilterOption<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="iinnertreenode" tabindex="-1">IInnerTreeNode <a class="header-anchor" href="#iinnertreenode" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">interface</span> <span class="token class-name">IInnerTreeNode</span> <span class="token keyword">extends</span> <span class="token class-name">ITreeNode</span> <span class="token punctuation">{</span>
  level<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
  idType<span class="token operator">?</span><span class="token operator">:</span> <span class="token string">&#39;random&#39;</span><span class="token punctuation">;</span>
  parentId<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  isLeaf<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
  parentChildNodeCount<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
  currentIndex<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
  loading<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span> <span class="token comment">// 节点是否显示加载中</span>
  childNodeCount<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> <span class="token comment">// 该节点的子节点的数量</span>
  isMatched<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span> <span class="token comment">// 搜索过滤时是否匹配该节点</span>
  childrenMatched<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span> <span class="token comment">// 搜索过滤时是否有子节点存在匹配</span>
  isHide<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span> <span class="token comment">// 过滤后是否不显示该节点</span>
  matchedText<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// 节点匹配的文字（需要高亮显示）</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="searchfilteroption" tabindex="-1">SearchFilterOption <a class="header-anchor" href="#searchfilteroption" aria-hidden="true">#</a></h4><div class="language-ts"><pre><code><span class="token keyword">interface</span> <span class="token class-name">SearchFilterOption</span> <span class="token punctuation">{</span>
  isFilter<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span> <span class="token comment">// 是否是过滤节点</span>
  matchKey<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// node节点中匹配搜索过滤的字段名</span>
  pattern<span class="token operator">?</span><span class="token operator">:</span> RegExp<span class="token punctuation">;</span> <span class="token comment">// 搜索过滤时匹配的正则表达式</span>
<span class="token punctuation">}</span>
</code></pre></div></div></div><div data-v-35e0cb6b><div class="page-contributor-label" data-v-35e0cb6b>Contributors</div><div class="page-contributor" data-v-35e0cb6b data-v-36223ac2><!--[--><a href="https://github.com/kagol" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/9566362?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/sufuwang" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/46395105?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/faq0192" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/87163017?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/linxiang07" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/40119767?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/daviForevel" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/39021499?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/xingyan95" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/11143986?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/newer2333" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/32949033?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/foolmadao" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/39939976?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><a href="https://github.com/NoTwoBoy" target="_blank" data-v-36223ac2><span class="devui-avatar contributor-avatar" style="margin-right:8px;margin-bottom:4px;" data-v-36223ac2><img src="https://avatars.githubusercontent.com/u/74694190?v=4" alt style="height:36px;width:36px;border-radius:100%;"><!----><!----><!----></span></a><!--]--></div></div><footer class="page-footer" data-v-35e0cb6b data-v-63a8fcc6><div class="edit" data-v-63a8fcc6><div class="edit-link" data-v-63a8fcc6 data-v-084d37fe><!----></div></div><div class="updated" data-v-63a8fcc6><!----></div></footer><div class="next-and-prev-link" data-v-35e0cb6b data-v-1443c067><div class="container" data-v-1443c067><div class="prev" data-v-1443c067><a class="link" href="/components/timeline/" data-v-1443c067><svg t="1637469990202" class="icon icon icon-prev" viewbox="0 0 1056 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5081" width="16" height="16" data-v-1443c067><path d="M277.92 512.064c0 8.128 3.072 16.224 9.28 22.4l362.336 362.336a31.808 31.808 0 0 0 45.12-0.128 31.904 31.904 0 0 0 0.128-45.12L355.2 512 694.72 172.448a31.808 31.808 0 0 0-0.128-45.12 31.904 31.904 0 0 0-45.12-0.128L287.232 489.536a31.616 31.616 0 0 0-9.312 22.4l0.032 0.128z" fill="var(--devui-brand, #5e7ce0)" p-id="5082"></path></svg><span class="text" data-v-1443c067>Timeline 时间轴</span></a></div><div class="next" data-v-1443c067><a class="link" href="/components/grid/" data-v-1443c067><span class="text" data-v-1443c067>Grid 栅格</span><svg t="1637469947735" class="icon icon icon-next" viewbox="0 0 1056 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4917" width="16" height="16" data-v-1443c067><path d="M746.08 512.064a31.584 31.584 0 0 1-9.28 22.4L374.464 896.8a31.808 31.808 0 0 1-45.12-0.128 31.904 31.904 0 0 1-0.128-45.12L668.8 512 329.28 172.448a31.808 31.808 0 0 1 0.128-45.12 31.904 31.904 0 0 1 45.12-0.128l362.304 362.336c6.208 6.176 9.28 14.272 9.312 22.4l-0.032 0.128z" fill="var(--devui-brand, #5e7ce0)" p-id="4918"></path></svg></a></div></div></div><!--[--><!--]--><!----><aside class="toc-warpper" data-v-35e0cb6b data-v-38776bfe><nav class="devui-content-nav" data-v-38776bfe><h3 class="devui-fast-forward" data-v-38776bfe>快速前往</h3><ul class="devui-step-nav" data-v-38776bfe><!--[--><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#基本用法" title="基本用法" data-v-38776bfe>基本用法</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#节点懒加载" title="节点懒加载" data-v-38776bfe>节点懒加载</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#可勾选" title="可勾选" data-v-38776bfe>可勾选</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#默认状态" title="默认状态" data-v-38776bfe>默认状态</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#禁用状态" title="禁用状态" data-v-38776bfe>禁用状态</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#自定义图标" title="自定义图标" data-v-38776bfe>自定义图标</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#节点合并" title="节点合并" data-v-38776bfe>节点合并</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#操作按钮" title="操作按钮" data-v-38776bfe>操作按钮</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#搜索过滤" title="搜索过滤" data-v-38776bfe>搜索过滤</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#虚拟滚动" title="虚拟滚动" data-v-38776bfe>虚拟滚动</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#可拖拽树" title="可拖拽树" data-v-38776bfe>可拖拽树</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#tree-参数" title="Tree 参数" data-v-38776bfe>Tree 参数</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#tree-事件" title="Tree 事件" data-v-38776bfe>Tree 事件</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#tree-插槽" title="Tree 插槽" data-v-38776bfe>Tree 插槽</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#treenode-参数" title="TreeNode 参数" data-v-38776bfe>TreeNode 参数</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#tree-类型定义" title="Tree 类型定义" data-v-38776bfe>Tree 类型定义</a></li><li class="devui-item" data-v-38776bfe><a class="devui-link" href="#treefactory" title="treeFactory" data-v-38776bfe>treeFactory</a></li><!--]--></ul><div class="devui-marker" data-v-38776bfe></div></nav></aside></div></main></div><!----><!----><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"components_accordion_index.md\":\"a92e3443\",\"components_alert_index.md\":\"c7702e03\",\"components_anchor_index.md\":\"f7333cbb\",\"components_auto-complete_index.md\":\"4de98e8d\",\"components_avatar_index.md\":\"69aa04d5\",\"components_back-top_index.md\":\"d1ab787c\",\"components_badge_index.md\":\"e4750848\",\"components_breadcrumb_index.md\":\"c976c02b\",\"components_button_index.md\":\"5ad2976d\",\"components_card_index.md\":\"07ffbefa\",\"components_carousel_index.md\":\"f88f0b13\",\"components_cascader_index.md\":\"ee34cce7\",\"components_checkbox_index.md\":\"3ec7d7a1\",\"components_collapse_index.md\":\"9f2cbd98\",\"components_color-picker_index.md\":\"76658b37\",\"components_comment_index.md\":\"7f6ae658\",\"components_countdown_index.md\":\"556b68b1\",\"components_date-picker-pro_index.md\":\"a354c050\",\"components_date-picker_index.md\":\"00801143\",\"components_dragdrop_index.md\":\"27ca48b1\",\"components_drawer_index.md\":\"f1f95db0\",\"components_dropdown_index.md\":\"2e85d37e\",\"components_editable-select_index.md\":\"dfceeabe\",\"components_form_index.md\":\"aa7415f4\",\"components_fullscreen_index.md\":\"91a2fd77\",\"components_gantt_index.md\":\"c7536435\",\"components_grid_index.md\":\"646531b7\",\"components_icon_index.md\":\"b13a05fb\",\"components_image-preview_index.md\":\"6064aa0f\",\"components_input-icon_index.md\":\"03605b44\",\"components_input-number_index.md\":\"75cb181b\",\"components_input_index.md\":\"399db2a5\",\"components_layout_index.md\":\"bd89a2a7\",\"components_list_index.md\":\"398a7889\",\"components_loading_index.md\":\"86c25c88\",\"components_mention_index.md\":\"4e5fcead\",\"components_menu_index.md\":\"5e7b2a2a\",\"components_message_index.md\":\"288b49b1\",\"components_modal_index.md\":\"6d985802\",\"components_multi-auto-complete_index.md\":\"d7dd7812\",\"components_nav-sprite_index.md\":\"59326b1c\",\"components_notification_index.md\":\"17d66bf4\",\"components_overlay_index.md\":\"b3c2d8b1\",\"components_overview_index.md\":\"4f4893a2\",\"components_pagination_index.md\":\"fa43e1ee\",\"components_panel_index.md\":\"78140495\",\"components_popover_index.md\":\"e061fad6\",\"components_progress_index.md\":\"f99bb298\",\"components_quadrant-diagram_index.md\":\"5b863b4f\",\"components_radio_index.md\":\"1569e619\",\"components_rate_index.md\":\"8ed5b018\",\"components_read-tip_index.md\":\"65f3a3e8\",\"components_result_index.md\":\"5a0e2c71\",\"components_ripple_index.md\":\"e22eb85c\",\"components_search_index.md\":\"a6ca9673\",\"components_select_index.md\":\"14f5b72d\",\"components_skeleton_index.md\":\"87cfbcd2\",\"components_slider_index.md\":\"c3e69a49\",\"components_splitter_index.md\":\"7b49b977\",\"components_statistic_index.md\":\"699289db\",\"components_status_index.md\":\"9b3ee9c1\",\"components_steps-guide_index.md\":\"4d707f63\",\"components_steps_index.md\":\"75686d75\",\"components_sticky_index.md\":\"839717a7\",\"components_switch_index.md\":\"05eb9888\",\"components_table_index.md\":\"1b34dab5\",\"components_tabs_index.md\":\"2612fccc\",\"components_tag-input_index.md\":\"d6c90326\",\"components_tag_index.md\":\"9d46f105\",\"components_textarea_index.md\":\"f6a86e66\",\"components_time-picker_index.md\":\"f8cff83c\",\"components_time-select_index.md\":\"38dfaf50\",\"components_timeline_index.md\":\"9b7ebcb4\",\"components_tooltip_index.md\":\"f9f4b384\",\"components_transfer_index.md\":\"7005ca26\",\"components_tree-select_index.md\":\"d122e78e\",\"components_tree_index.md\":\"2611f2c7\",\"components_upload_index.md\":\"65171bcd\",\"components_virtual-list_index.md\":\"6c90a3dd\",\"contributing_development-specification_api-demo-design_index.md\":\"fc9f2d3e\",\"contributing_development-specification_coding-specification_index.md\":\"af51d196\",\"contributing_development-specification_component-document_index.md\":\"a849b30c\",\"contributing_development-specification_directory-organization_index.md\":\"58197a6f\",\"contributing_development-specification_index.md\":\"1df9cfa5\",\"contributing_index.md\":\"7660b0ff\",\"en-us_components_alert_index.md\":\"96d493c1\",\"en-us_components_auto-complete_api-en.md\":\"004a35e9\",\"en-us_components_avatar_index.md\":\"dbe38f1a\",\"en-us_components_badge_index.md\":\"e48f2672\",\"en-us_components_button_index.md\":\"ec772540\",\"en-us_components_carousel_index.md\":\"3fec7a3f\",\"en-us_components_color-picker_index.md\":\"9fe5a01c\",\"en-us_components_comment_index.md\":\"2a0696ba\",\"en-us_components_editable-select_index.md\":\"73d1175f\",\"en-us_components_form_index.md\":\"65caae2d\",\"en-us_components_input_index.md\":\"136ae80e\",\"en-us_components_menu_index.md\":\"0bb24150\",\"en-us_components_message_index.md\":\"3fa5c7c8\",\"en-us_components_modal_index.md\":\"736ef31f\",\"en-us_components_panel_index.md\":\"4a1db166\",\"en-us_components_popover_index.md\":\"6b07f22f\",\"en-us_components_progress_index.md\":\"b364f914\",\"en-us_components_radio_index.md\":\"bddcefa7\",\"en-us_components_rate_index.md\":\"3940452b\",\"en-us_components_read-tip_index.md\":\"56a74b67\",\"en-us_components_result_index.md\":\"369abc51\",\"en-us_components_ripple_index.md\":\"b6d519cb\",\"en-us_components_search_index.md\":\"8745e3f6\",\"en-us_components_skeleton_index.md\":\"73d6ba05\",\"en-us_components_slider_index.md\":\"d6b0ecd3\",\"en-us_components_splitter_index.md\":\"ae397e5b\",\"en-us_components_statistic_index.md\":\"6f27cda4\",\"en-us_components_status_index.md\":\"e80d4793\",\"en-us_components_tag_index.md\":\"2388e235\",\"en-us_components_tooltip_index.md\":\"6013670f\",\"en-us_index.md\":\"45997edd\",\"en-us_quick-start_index.md\":\"5cb0ca76\",\"index.md\":\"d8afff32\",\"on-demand_index.md\":\"cc889f91\",\"quick-start_index.md\":\"2f52f012\",\"theme-guide_index.md\":\"4b58afef\"}")</script>
    <script type="module" async src="/assets/app.43ba01c1.js"></script>
    
  </body>
</html>